<template>
  <el-container>
    <el-header height="auto">
      <label class="title">搜索数据中心</label>
      <el-row>
        <el-col :span="5">
          <my-input ref="nameInput" prefixDesc="名称" @change="getDataCenterName"></my-input>
        </el-col>
        <el-col :span="5">
          <my-select
            ref="statusSelect"
            prefixDesc="状态"
            :dataSource="constant.DATA_CENTER_STATUS_LIST"
            @select="getSelectStatus"
            @clear="clearStatus"
          ></my-select>
        </el-col>
        <el-col :span="5">
          <my-input ref="addressInput" prefixDesc="地址" @change="getDataCenterAddress"></my-input>
        </el-col>
        <el-col :span="5">
          <my-select
            ref="orgSelect"
            prefixDesc="拥有机构"
            :dataSource="constant.DATA_CENTER_ORG_LIST"
            @select="getSelectOrg"
            @clear="clearOrg"
          ></my-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <my-select-country ref="countrySelect" defaultCountryName="中国" @select="getSelectCountry"></my-select-country>
        </el-col>
        <el-col :span="5">
          <my-select-city ref="citySelect" :countryId="search.dccountryid" @select="getSelectCity"></my-select-city>
        </el-col>
        <el-col :span="4" class="el-col-left">
          <el-button type="primary" size="mini" @click="loadDataCenterList(1, null)">搜索</el-button>
          <el-button type="info" size="mini" @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-main v-loading="loading">
      <label class="title">数据中心列表</label>
      <el-table :data="dataCenterList" size="mini" stripe>
        <el-table-column prop="datacentername" label="名称" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">{{ scope.row.dcstatus | dataCenterStatus }}</template>
        </el-table-column>
        <el-table-column prop="workOrderNum" label="拥有机构" align="center">
          <template slot-scope="scope">{{ scope.row.organizationtype | orgTypes }}</template>
        </el-table-column>
        <el-table-column prop="countryname" label="国家" align="center"></el-table-column>
        <el-table-column prop="cityname" label="城市" align="center"></el-table-column>
        <el-table-column prop="datacenteraddress" label="地址" align="center"></el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPageNum"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      />
    </el-footer>
  </el-container>
</template>

<script>
import MySelect from '../../../common/components/MySelect'
import MySelectCountry from '../../../common/components/MySelectCountry'
import MySelectCity from '../../../common/components/MySelectCity'
import MyInput from '../../../common/components/MyInput'
import { getAllDataCenter, getAllCityByCountryId } from '../../../api/itopApi'
import { Message } from 'element-ui'

export default {
  name: 'DataCenterList',
  components: {
    'my-select': MySelect,
    'my-select-country': MySelectCountry,
    'my-select-city': MySelectCity,
    'my-input': MyInput
  },
  data() {
    return {
      loading: false,
      totalCount: 0,
      currentPageNum: 1,
      currentPageSize: 10,
      search: {
        pageNum: 1,
        pageSize: 10,
        dccountryid: 12,
        dccityid: '',
        dcstatus: '',
        organizationtype: '',
        datacentername: '',
        datacenteraddress: ''
      },
      dataCenterList: []
    }
  },
  methods: {
    getDataCenterName(value) {
      this.search.datacentername = value
    },
    getDataCenterAddress(value) {
      this.search.datacenteraddress = value
    },
    getSelectStatus(value) {
      this.search.dcstatus = value
    },
    clearStatus() {
      this.search.dcstatus = ''
    },
    getSelectOrg(value) {
      this.search.organizationtype = value
    },
    clearOrg() {
      this.search.organizationtype = ''
    },
    getSelectCountry(item) {
      this.search.dccountryid = item === null ? '' : item.id
    },
    getSelectCity(item) {
      this.search.dccityid = item.id
    },
    loadDataCenterList(pageNum, pageSize) {
      if (pageNum) {
        this.search.pageNum = pageNum
      }
      if (pageSize) {
        this.search.pageSize = pageSize
      }
      this.loading = true
      getAllDataCenter(this.search)
        .then(data => {
          this.loading = false
          this.dataCenterList = data.list
          this.totalCount = data.total
          this.currentPageNum = this.search.pageNum
        })
        .catch(error => {
          this.loading = false
          Message.error(error.message)
        })
    },
    resetSearch() {
      this.search = {
        pageNum: 1,
        pageSize: this.currentPageSize,
        dccountryid: 12,
        dccityid: '',
        dcstatus: '',
        organizationtype: '',
        datacentername: '',
        datacenteraddress: ''
      }
      this.$refs.nameInput.reset()
      this.$refs.statusSelect.reset()
      this.$refs.addressInput.reset()
      this.$refs.orgSelect.reset()
      this.$refs.countrySelect.reset()
      this.$refs.citySelect.reset()
      this.loadDataCenterList(1, null)
    },
    handleSizeChange(pageSize) {
      this.currentPageNum = 1
      this.currentPageSize = pageSize
      this.loadDataCenterList(1, pageSize)
    },
    handleCurrentChange(pageNum) {
      this.loadDataCenterList(pageNum, null)
    }
  },
  mounted() {
    this.loadDataCenterList()
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  text-align: left;
  font-size: 14px;
  .el-header {
    background-color: #fff;
    padding: 0 0 20px;
    & > .el-row {
      margin-top: 16px;
      .el-col {
        text-align: right;
        line-height: 32px;
        &-left {
          text-align: left;
          padding-left: 40px;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    margin-top: 16px;
    background-color: #fff;
  }
  .title {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .el-footer {
    text-align: right;
    padding: 10px 0 0;
  }
}
</style>

